<template>
  <div class="search">
    <div class="main-search">
      <div class="tit-search">
        <h3>文章搜索</h3>
        <span @click="back()">X</span>
      </div>
      <div class="input-search">
        <input type="text" v-model="searchValue" />
        <i class="el-icon-search" @click="search"></i>
      </div>
      <ul class="con-search">
        <li v-for="(item) in articleList" :key="item.id"
        @click="toArticle(item.id)"
        >
          {{item.title}}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchValue: "",
      articleList: [],
    };
  },
  computed: {},
  methods: {
    // 点击搜索
    search() {
      this.$api
        .getArticleList({
          title: this.searchValue,
        })
        .then((res) => {
          if (res.success) {
            this.articleList = res.data.data;
            // 添加搜索记录
            
          }
        });
    },
    // 去文章详情
    toArticle(id){
      this.$router.push("/layout/article/" + id);
    },
    // 返回上一个页面
    back(){
      this.$router.go(-1);
    }
  },
  components: {},
};
</script>
<style lang="scss" scoped>
.search {
  width: 100%;
  height: 100%;
  .main-search {
    width: 1000px;
    margin: 0 auto;
    overflow: hidden;
    .tit-search {
      display: flex;
      justify-content: space-between;
      height: 60px;
      align-items: center;
      margin-top: 30px;
      span {
        font-size: 30px;
        color: #ccc;
      }
    }
    .input-search {
      height: 40px;
      display: flex;
      input {
        flex: 1;
        height: 100%;
        border: 1px solid #ccc;
        outline: none;
      }
      input:focus {
        border: 1px solid red;
      }
      i {
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border: 1px solid #ccc;
      }
    }
    .con-search {
      li {
        height: 40px;
        line-height: 40px;
      }
      li:hover {
        background-color: #e7eaee;
      }
    }
  }
}
</style>